@extends('site.center.layouts.center_master')
@push('center_css')
    <link href="{{asset('/org/site')}}/css/addstyle.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{{asset('/org/plus/city-picker.css')}}">
@endpush
@section('content')
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-address">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">地址管理</strong> /
                        <small>Address&nbsp;list</small>
                    </div>
                </div>
                <hr/>
                <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails" style="margin-left: 10px">
                    @foreach($vars as $address)
                        <li class="user-addresslist {{$address['is_default']?'defaultAddr':''}}">
                        <span class="new-option-r">
                            <i class="am-icon-check-circle"></i>
                            <a href="{{route('center.set_default_address',$address)}}" style="color: white">
                            {{$address['is_default']?'默认地址':'设为默认'}}
                            </a>
                        </span>
                            <p class="new-tit new-p-re">
                                <span class="new-txt">{{$address['name']}}</span>
                                <span class="new-txt-rd2">{{$address['phone']}}</span>
                            </p>
                            <div class="new-mu_l2a new-p-re">
                                <p class="new-mu_l2cw">
                                    <span class="title">地址：</span>
                                    <span class="province">{{explode('/',$address['area'])[0]}}</span>
                                    <span class="city">{{explode('/',$address['area'])[1]}}</span>
                                    <span class="dist">{{explode('/',$address['area'])[2]}}</span>
                                    <span class="street">{{$address['detail']}}</span></p>
                            </div>
                            <div class="new-addr-btn">
                                <a href="{{route('center.address.edit',$address)}}">
                                    <i class="am-icon-edit"></i>编辑
                                </a>
                                <span class="new-addr-bar">|</span>
                                <a style="cursor: pointer" onclick="delClick(this)"><i class="am-icon-trash"></i>删除</a>
                                <form hidden action="{{route('center.address.destroy',$address)}}" method="post">
                                    @csrf @method('DELETE')
                                </form>
                            </div>
                        </li>
                    @endforeach
                    <script>
                        function delClick(obj) {
                            if (confirm('确定要删除该地址吗?')) {
                                $(obj).next('form').submit();
                            }
                        }

                        /*
                        function editClick(obj, num) {
                            // location.href='/center/address';

                            require(['hdjs', 'axios'], function (hdjs, axios) {
                                axios.get('/center/address/' + num + '/edit').then((res) => {
                                    // 其实多此一举了,完全没必要发异步请求,获取要编辑的数据直接以数组的形式传递到js中不就行了,我还发异步绕一大
                                    if (res.valid){
                                        //进入这个方法体中说明异步发送成功,已经获取到数据了
                                        // 用js将数据设置到地址输入框中
                                        // let data = res.data.data;
                                        // $("#user-name").val(data.name);
                                        // 在这里设置值没有问题,但是新设置的值在页面上不能显示出来就不行了
                                    }
                                })
                            })
                        }
                        */
                    </script>
                </ul>
                <div class="clear"></div>
                <a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
                <!--例子-->
                <div id="doc-modal-1">
                    @if(isset($_address))
                        <div class="add-dress">

                            <!--标题 -->
                            <div class="am-cf am-padding">

                                <div class="am-fl am-cf">
                                    <strong class="am-text-danger am-text-lg">修改地址</strong> /
                                    <small>Add&nbsp;address</small>
                                </div>
                            </div>
                            <hr/>
                            <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                                <form class="am-form am-form-horizontal" method="post"
                                      action="{{route('center.address.update',$_address)}}" >
                                    @csrf @method('PUT')
                                    <div class="am-form-group">
                                        <label for="user-name" class="am-form-label">收货人</label>
                                        <div class="am-form-content">
                                            <input type="text" name="name" id="user-name" placeholder="收货人"
                                                   VALUE="{{$_address['name']}}">
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="user-phone" class="am-form-label">手机号码</label>
                                        <div class="am-form-content">
                                            <input id="user-phone" name="phone" value="{{$_address['phone']}}" required
                                                   type="text">
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="user-address" class="am-form-label">所在地</label>
                                        <div style="position:relative;left: 108px">
                                            <input readonly name="area" type="text" data-toggle="city-picker" value="{{$_address['area']}}" data-responsive="true" style="width:84%;">
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label class="am-form-label">默认地址</label>
                                        <div class="am-form-content">
                                            <input name="is_default" type="checkbox"
                                                   {{$_address['is_default']?'checked':''}} value="1"
                                                   style="margin: 11px 3px 0">
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label for="user-intro" class="am-form-label">详细地址</label>
                                        <div class="am-form-content">
                                        <textarea class="" name="detail" rows="3" id="user-intro"
                                                  placeholder="输入详细地址">
                                            {{$_address['detail']}}
                                        </textarea>
                                            <small>100字以内写出你的详细地址</small>
                                        </div>
                                    </div>

                                    <div class="am-form-group" style="margin-top: 100px">
                                        <div class="am-u-sm-9 am-u-sm-push-3">
                                            <button class="am-btn am-btn-danger">保存</button>
                                            <a href="javascript:;" class="am-close am-btn am-btn-danger"
                                               data-am-modal-close>取消</a>
                                        </div>
                                    </div>
                                </form>
                            </div>

                        </div>
                    @else
                        <div class="add-dress">

                            <!--标题 -->
                            <div class="am-cf am-padding">

                                <div class="am-fl am-cf">
                                    <strong class="am-text-danger am-text-lg">新增地址</strong> /
                                    <small>Add&nbsp;address</small>
                                </div>
                            </div>
                            <hr/>
                            <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                                <form class="am-form am-form-horizontal" method="post"
                                      action="{{route('center.address.store')}}" >
                                    @csrf
                                    <div class="am-form-group">
                                        <label for="user-name" class="am-form-label">收货人</label>
                                        <div class="am-form-content">
                                            <input type="text" name="name" id="user-name" placeholder="收货人">
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label for="user-phone" class="am-form-label">手机号码</label>
                                        <div class="am-form-content">
                                            <input id="user-phone" name="phone" required type="text">
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label for="user-address" class="am-form-label">所在地</label>
                                        <div style="position:relative;left: 108px">
                                            <input readonly name="area" type="text" data-toggle="city-picker" value="河南省/南阳市/淅川县" data-responsive="true" style="width:84%;">
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label class="am-form-label">默认地址</label>
                                        <div class="am-form-content">
                                            <input name="is_default" type="checkbox" value="1"
                                                   style="margin: 11px 3px 0">
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label for="user-intro" class="am-form-label">详细地址</label>
                                        <div class="am-form-content">
                                        <textarea class="" name="detail" rows="3" id="user-intro"
                                                  placeholder="输入详细地址"></textarea>
                                            <small>100字以内写出你的详细地址</small>
                                        </div>
                                    </div>

                                    <div class="am-form-group" style="margin-top: 100px">
                                        <div class="am-u-sm-9 am-u-sm-push-3">
                                            <button class="am-btn am-btn-danger">保存</button>
                                            <a href="javascript: void(0)" class="am-close am-btn am-btn-danger"
                                               data-am-modal-close>取消</a>
                                        </div>
                                    </div>
                                </form>
                            </div>

                        </div>
                    @endif
                </div>

            </div>

            <script type="text/javascript">
                /*
                $(document).ready(function() {
                    $(".new-option-r").click(function() {
                        $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                    });
                    //下面这个js的意思是如果当前窗口的宽度大于640就从id=doc-modal-1 这个元素标签中将am-modal am-modal-no-btn这两个类名给去掉.默认是带有这个类名的,也就是默认id=doc-modal-1这个元素其实是不显示的
                    var $ww = $(window).width();
                    if($ww>640) {
                        $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                    }

                })
                */
            </script>

            <div class="clear"></div>

        </div>
        <!--公共的底部-->
        @include('site.layouts._bottom')
    </div>
@endsection
@push('center_js')
    <script type="text/javascript" src="{{asset('/org/plus/city-picker.data.js')}}"></script>
    <script type="text/javascript" src="{{asset('/org/plus/city-picker.js')}}"></script>
@endpush
